<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>结算</title>
		<link rel="stylesheet" type="text/css"  th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/cart.css}" />
	
		<style type="text/css">
			.form-control{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<!--导航部分  begin-->
		<div th:replace="common/bookAll::header"></div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div th:replace="common/bookAll::carousel"></div>
		<!--最顶端轮播图片 end-->
		
		<!--购物车 begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="col-md-8 col-sm-12">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
					</li>
				</ol>
				
				<!--送货地址  begin-->
				<div style="margin-bottom: 5px;" id="addrDiv">
					<ul class="list-group" id="address">
						<li th:if="${not #lists.isEmpty(addressList)}" th:each="address:${addressList}" class="list-group-item">
							<input type="radio" name="addr" th:value="${address.id}" th:text="${address.province} + ${address.city} + ${address.area} + ${address.detailAddress}" th:attr ="checked=${address.isDefault == '1'?true:false}">&nbsp;<span th:if="${address.isDefault == '1'}" class="text-danger">默认地址</span>
						</li>
						<li class="list-group-item" th:if="${#lists.isEmpty(addressList)}">暂无收货地址！</li>
					</ul>
					<a href="#" class="text-info" onclick="dispalyMoreAddr(this)">更多地址↓&nbsp;&nbsp;</a>
					<a href="javascript:void(0)" id="addAddr" class="text-success" data-toggle="modal" data-target="#addressModal">添加新地址</a>
				</div>
				<hr>
				
				
				<!--添加新地址模态框 begin-->
				<!-- 模态框（Modal） -->
				<div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="addressModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="addressModalLabel">
									<span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;添加新收货地址
								</h4>
							</div>
							<div class="modal-body">
							<!--地址的form表单-->
							<form action="" id="addressForm" class="form-horizontal" role="form">
								<div class="form-group">
									<label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>
										
									<div data-toggle="distpicker">
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="province1">Province</label>
										  <select class="form-control" name="province" id="province1"></select>
										</div>
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="city1">City</label>
										  <select class="form-control" name="city" id="city1"></select>
										</div>
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="district1">District</label>
										  <select class="form-control" name="area" id="district1"></select>
										</div>
									 </div>
								</div>
								<div class="form-group has-feedback" style="clear:both">
									<label for="deatails" class="col-sm-2 control-label">详细地址:</label>
									<div class="col-sm-5">
										<textarea class="form-control" name="detailAddress" id="deatails"></textarea>
									</div>
									
								</div>
								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">邮政编码</label>
									<div class="col-md-5">
										<input type="text" name="emailCode" class="form-control" id="lastname2" placeholder="邮政编码">
										<span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
									</div>
								</div>
	
								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">姓名</label>
									<div class="col-sm-5">
										<input type="text" name="receiver" class="form-control" id="username" placeholder="收货人姓名">
										<span class="glyphicon glyphicon-user form-control-feedback"></span>
									</div>
								</div>

								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">电话</label>
									<div class="col-sm-5">
										<input type="tel" name="tel" class="form-control" id="tel" placeholder="合法手机格式">
										<span class="glyphicon glyphicon-phone form-control-feedback"></span>
									</div>
								</div>
								
								<div class="form-group">
								    <div class="col-sm-offset-2 col-sm-10">
								      <div class="checkbox">
								        <label>
								          <input type="checkbox" name="isDefault" id="setDefaultAddr"><span class="text-success">设置默认地址</span>
								        </label>
								      </div>
								    </div>
								</div>

								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<input type="button" th:onclick="addAddress()" class="btn btn-primary" value="提交地址">
								</div>
							</form>
						<!--form结束-->
						</div>
					</div>
				<!-- /.modal-content -->
				</div>
			</div>
				<!--左边-->
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;结算清单</a>
					</li>
				</ol>

				<!--购物车表格 begin-->
				<div class="table-responsive" id="imgDiv">
					<table class="table table-hover table-striped" style="vertical-align:middle;">
						<thead>
							<tr class="text-success success">
								<th id="sequence">序号</th>
								<th>图片</th>
								<th>书名</th>
								<th>单价</th>
								<th>数量</th>
								<th>合计</th>
							</tr>
						</thead>
						<tbody id="tby">
						<tr th:each="cart,iter:${list}">
							<td th:text="${cart.bookId}">1001</td>
							<td><img th:src="@{'/images/' + ${cart.imgUrl}}" src="images/tenxunchuan.jpg"></td>
							<td th:text="${cart.bookName}">腾讯传</td>
							<td th:text="${cart.newPrice + '元'}">35.0元</td>
							<td th:text="${cart.count}">10</td>
							<td th:id="${'cartTotalPrice' + iter.index}" th:text="${cart.newPrice * cart.count + '元'}">100$</td>
						</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="4"></td>
								<td class="text-success">总价:</td>
								<td class="text-success" th:text="${session.userCartInfo.totalPrice}">345$:</td>
							</tr>
							<tr style="background-color: white;">
								<td>
									<a th:href="@{/book/index}" href="index.html" class="btn btn-info">&lt;&lt;继续购买</a>
								</td>
								<td colspan="4"></td>
								<td>
									<a th:onclick="commitOrder()" href="javascript:void(0)" class="btn btn-warning">提交订单</a>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
				<!--购物车 end-->

			</div>

			<!--右边-->
			<div class="col-md-4 col-sm-3 col-xs-8">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
					</li>
					<li>
						<a href="#" th:text="${session.userCartInfo.count + '个商品'}">3个商品</a>
					</li>
					<li>
						<a href="#" class="cartPrice" th:text="${'总价' + session.userCartInfo.totalPrice + '元'}">总价100元</a>
					</li>
				</ol>

				<!--猜您喜欢-->
				<div>
					<span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
					<div class="row" id="love">
						<div class="col-sm-12 col-md-12 wow fadeInRight animated">
							<div class="thumbnail">
								<a th:href="@{/book/detail(id=4)}"><img th:src="@{/images/cikehuakai.jpg }" src="images/cikehuakai.jpg " style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>此刻花开</h3>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-md-12 wow fadeInRight animated">
							<div class="thumbnail ">
								<a th:href="@{/book/detail(id=15)}"><img th:src="@{/images/taikong.jpg}" src="images/jindumanbu.jpg " style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>太空</h3>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-md-12 wow fadeInRight animated">
							<div class="thumbnail ">
								<a th:href="@{/book/detail(id=7)}"><img th:src="@{/images/lapulasidemonv.jpg}" src="images/lapulasidemonv.jpg" style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>拉普拉斯的魔女</h3>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--喜欢end-->
			</div>
		</div>

		<div class="container">
			<!--首页底部信息 begin-->
			<div th:replace="common/bookAll::footer"></div>
		</div>
		<!--end-->
		
		<script th:src="@{/dist/js/jquery.min.js}"></script>
		<script th:src="@{/js/wow.js}"></script>
		<script th:src="@{/js/carousel.js}" type="text/javascript"></script>
		<script th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script th:src="@{/dist/js/distpicker.data.min.js}"></script>
		<script th:src="@{/dist/js/distpicker.min.js}"></script>
		<script th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/confirm_order.js}"></script>
		<script th:src="@{/js/sweetalert.min.js}"></script>
		<script th:inline="javascript">
			var contextPath = [[${#request.getContextPath()}]];
		</script>
		<script type="text/javascript">
			if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
				new WOW().init();
			};

			function commitOrder() {
				var val = $('input:radio[name="addr"]:checked').val();
				if (val == null){
					swal("提示信息", "请选择地址！", "warning")
					return;
				}else {
					window.location.href = contextPath + "/order/commitOrder?addressId="+val;
				}
			}

			//新增收货地址
			function addAddress() {
				var addData = $("#addressForm").serialize();
				$.ajax({
					url: contextPath + "/address/add",
					data: addData,
					method:"post",
					success: function (data) {
						if (data == "success"){
							window.location.reload(true);
						}
					}
				})
			}
		</script>
	</body>
</html>
